<template>
    <div class="proxy-links-box">
        <div class="proxy-links-box-title">
            <p class="proxy-title-item"><span>详细介绍</span></p>
        </div>
        <div class="proxy-links-box-content-detail">
            <div class="detail-text">
                游戏返佣以游戏有效投注来计算，俱乐部返佣以输赢有效流水来计算。
            </div>
            <div class="detail-example">
                <p>以电子游戏返佣0.65%为例 <span class="detail-link">详情</span></p>
            </div>
            <div class="detail-desc">
                代理A1最先发现机会，发展了B1和B2,B1向代理A1申请成为代理，B1又发展C1和C2,C1向B1申请为代理
            </div>
            <div class="detail-amount">
                每日结算时，代理A1有效投注1,000,000VND，代理B1有效投注1,000,000VND，B2有效投注1,000,000VND，代理C1有效投注1,000,000VND，C2有效投注1,000,000VND
            </div>
            
            <div class="detail-section">
                <div class="section-title">【A1的直属玩家】</div>
                <div class="section-content">
                    <p>A1本人，返佣抽成 80%</p>
                    <p>B2是A1的直属玩家，返佣抽成 80%</p>
                </div>
            </div>

            <div class="detail-section">
                <div class="section-title">收益如下</div>
                <div class="section-content">
                    <p>A1直属业绩=A1有效投注+B2有效投注</p>
                    <p>=100W+100W=200W VND</p>
                    <p class="mt-10">A1直属佣金=A1直属业绩×游戏返佣×A1返佣抽成</p>
                    <p>=200W×0.65%×80%=10,400VND</p>
                    <p class="mt-10">A1团队业绩=B1有效投注+C1有效投注+C2有效投注</p>
                    <p>=100W+100W+100W=300W</p>
                    <p class="mt-10">A1团队佣金=B1有效投注×游戏返佣×(A1返佣抽成-B1返佣抽成) +C1有效投注×游戏返佣×(A1返佣抽成-C1的直属上级B1返佣抽成) + C2有效投注×游戏返佣×(A1返佣抽成-C2的直属上级B1返佣抽成)</p>
                    <p>= (100W×0.65%×(80%-50%)) + (100W×0.65%×(80%-50%)) + (100W×0.65%×(80%-50%))</p>
                    <p>=5,850VND</p>
                    <p class="mt-10">总佣金=A1直属佣金+A1团队佣=10,400+5,850=16,250VND</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
// 如果需要props或其他逻辑可以在这里添加
</script>

<style lang="scss" scoped>
.proxy-links-box {
    background-color: #131232;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
    margin-top: 14px;

    .proxy-links-box-title {
        font-size: 14px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 18px; 
        margin-bottom: 8px;
    }

    .proxy-links-box-content-detail {
        color: #C6C4F5;
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
        
        .detail-text, .detail-example, .detail-desc, .detail-amount {
            margin-bottom: 8px;
            line-height: 18px;
        }

        .detail-example {
            .detail-link {
                color: #5B6CFF;
                margin-left: 8px;
                text-decoration: underline;
                text-decoration-color: #5B6CFF;
                cursor: pointer; // 添加鼠标指针样式，表明可点击
            }
        }

        .detail-section {
            margin-top: 14px;
            
            .section-title {
                color: #FFFFFF;
                font-weight: 500;
                margin-bottom: 8px;
            }

            .section-content {
                line-height: 18px;
                
                .mt-10 {
                    margin-top: 8px;
                }
            }
        }
    }
}
</style>